Change color of yandex maps line based on condition in jQuery

Last Reply 3 months ago By dharmendr

Posted 3 months ago

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);
}

 

You are viewing reply posted by: dharmendr 3 months ago.
Posted 3 months ago

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>