HiI used yandex maps and defined line in maps Now I want change color line by using switch case and parameterltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtExamples Polylineslttitlegt ltmeta httpequiv34ContentType34 content34texthtml charsetUTF834 gt lt Set your own APIkey Testing key is not valid for other websites and services Get your APIkey on the Developer Dashboard httpsdevelopertechyandexrukeys g

Hi PRACreate a function that will return color and pass the function to the the strokeColor propertyCheck below codeHTMLltscript src34httpsapimapsyandexru21langenRUampampapikeyltyour APIkeygt34 type34textjavascript34gtltscriptgtltscript src34polylinejs34 type34textjavascript34gtltscriptgtltscript type34textjavascript34gt ymapsreadyinit function StrokeColorres switch res case 1 return 3404630F34 case 2 return 34FFFF0034 case 3 return 34A9120934 function init Create variable for switch case var res 1 Creating the map var myMap new ymapsMap34map34 center 5572 3744 zoom 10 searchControlProvider 39yandexsearch39 Creating a polyline using the GeoObject class

Change color of yandex maps line based on condition in jQuery

PRA

SOLVED CLOSED ACTIVE ANSWERED
User: PRA
Posted: on Aug 17, 2020 11:22 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 3695

Hi!

I used yandex maps and defined line in maps. Now I want change color line by using switch case and parameter.

<!DOCTYPE html>
<html>
<head>
    <title>Examples. Polylines</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>" type="text/javascript"></script>
    <script src="polyline.js" type="text/javascript"></script>
	<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
</html>

ymaps.ready(init);
function init() {
    //Create variable for switch case
    var res = 1;
    // Creating the map.
    var myMap = new ymaps.Map("map", {
            center: [55.72, 37.44],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        });

    // Creating a polyline using the GeoObject class.
    var myGeoObject = new ymaps.GeoObject({
            // Describing the geometry of the geo object.
            geometry: {
                // The "Polyline" geometry type.
                type: "LineString",
                // Specifying the coordinates of the vertices of the polyline.
                coordinates: [
                    [55.80, 37.50],
                    [55.70, 37.40]
                ]
            },
            // Defining properties of the geo object.
            properties:{
                // The contents of the hint.
                hintContent: "I'm a geo object",
                // The contents of the balloon.
                balloonContent: "You can drag me"
            }
        }, {
            /**
             * Setting the geo object options.
             *  Enabling drag-n-drop for the polyline.
             */
            draggable: true,
            // The line color.             
            switch(res) 
            {
                case 1: strokeColor: "#04630F";
                break;
                case 2: strokeColor: "#FFFF00";
                break;
                case 3: strokeColor: "#A91209";
                break;
            },  
            
            // Line width.
            strokeWidth: 5
        });    

    // Adding lines to the map.
    myMap.geoObjects
        .add(myGeoObject);
}

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Aug 18, 2020 12:29 AM
Report

Hi PRA,

Create a function that will return color and pass the function to the the strokeColor property.

Check below code.

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>" type="text/javascript"></script>
<script src="polyline.js" type="text/javascript"></script>
<script type="text/javascript">
    ymaps.ready(init);

    function StrokeColor(res) {
        switch (res) {
            case 1: return "#04630F";
            case 2: return "#FFFF00";
            case 3: return "#A91209";
        }
    }

    function init() {
        //Create variable for switch case
        var res = 1;
        // Creating the map.
        var myMap = new ymaps.Map("map", {
            center: [55.72, 37.44],
            zoom: 10
        }, {
                searchControlProvider: 'yandex#search'
            });

        // Creating a polyline using the GeoObject class.
        var myGeoObject = new ymaps.GeoObject({
            // Describing the geometry of the geo object.
            geometry: {
                // The "Polyline" geometry type.
                type: "LineString",
                // Specifying the coordinates of the vertices of the polyline.
                coordinates: [
                    [55.80, 37.50],
                    [55.70, 37.40]
                ]
            },
            // Defining properties of the geo object.
            properties: {
                // The contents of the hint.
                hintContent: "I'm a geo object",
                // The contents of the balloon.
                balloonContent: "You can drag me"
            }
        }, {
                /**
                    * Setting the geo object options.
                    *  Enabling drag-n-drop for the polyline.
                    */
                draggable: true,
                // The line color.            
                strokeColor: StrokeColor(res),

                // Line width.
                strokeWidth: 5
            });

        // Adding lines to the map.
        myMap.geoObjects.add(myGeoObject);
    }
</script>
<div id="map"></div>

Change color of yandex maps line based on condition in jQuery

Company

Explore

Follow us

Contact Us