YoumapsAPI.setMapdataStyle

📘

Related REST API method

Take a look at setMapdataStyle.

YoumapsAPI.setMapdataStyle(mapdataId:Integer, style:JSON, styleMode:String, callback?:function)

Sets the given TileLayer/MarkerLayer style.

📘

Prerequisite

The Mapboard instance to which belongs the mapdata must be loaded before you can add a style to the mapdata by calling YoumapsAPI.setMapdataStyle.
Besides, the style you want to apply must have been previously added by calling YoumapsAPI.addMapdataStyle.

The style mode parameter must be "global" or "byAttribute". Instead of using magic Strings, we recommend using the constants Constant.GLOBAL_STYLE and Constant.BY_ATTRIBUTE_STYLE made available in the Constant class.

The style JSON format depends on the style mode ("byAttribute" or "global") and the mapdataType.

A global style JSON must have one of the following formats, depending on the mapdata type :

JSON

/**** POLYGON GLOBAL STYLE ****/
{  
   "name":"Polygon Global Style",
   "id" : 1,
   "fillColor":"#e94291",
   "fillOpacity":0.7,
   "strokeColor":"#e94291",
   "strokeWeight":"1",
   "strokeOpacity":0.7
}

/**** POLYLINE GLOBAL STYLE ****/
{  
   "name":"Polyline Global Style",
   "id" : 1,
   "strokeColor":"#f200ff",
   "strokeWeight":"4",
   "strokeOpacity":1
}

/**** POINT GLOBAL STYLE ****/
{  
   "name":"Point Global Style",
   "id" : 1,
   "markerWidth":"20",
   "markerHeight":"30",
   "markerLng":"0",
   "markerLat":"0",
   "markerAnimation":"Bounce",
   "markerClusterColor":"#1E88E5",
   //this icon URL is not mandatory, if not specified, the standard Youmaps marker will be used to render the marker on the map (using the fillColor & strokeColor you set)
   "iconUrl":"https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/174-free-google-maps-pointer.png/286px-174-free-google-maps-pointer.png",
   "fillColor":"#1e88e5",
   "fillOpacity":1,
   "strokeColor":"#1e88e5",
   "strokeWeight":"1",
   "strokeOpacity":1
}

A style by attribute JSON must have one of the following formats, depending on the mapdata type :

JSON

/**** POLYGON STYLE BY ATTRIBUTE ****/
{  
   "name":"Polygon Style By Attribute",
   "id" : 1,
   "attributeName":"sitetype",
   "stylesPerAttributeValue":[  
      {  
         "attributeValue":"A",
         "style":{  
            "fillColor":"#52e51e",
            "fillOpacity":0.95,
            "strokeColor":"#1e88e5",
            "strokeWeight":"1",
            "strokeOpacity":0
         }
      },
      {  
         "attributeValue":"B",
         "style":{  
            "fillColor":"#e55a1e",
            "fillOpacity":0.95,
            "strokeColor":"#1e88e5",
            "strokeWeight":"1",
            "strokeOpacity":0
         }
      }
   ]
}

/**** POLYLINE STYLE BY ATTRIBUTE ****/
{  
   "name":"Polyline Style By Attribute",
   "id" : 1,
   "attributeName":"id_pipes",
   "stylesPerAttributeValue":[  
      {  
         "attributeValue":"8862",
         "style":{  
            "strokeColor":"#311ee5",
            "strokeWeight":"3",
            "strokeOpacity":0.6
         }
      },
      {  
         "attributeValue":"81",
         "style":{  
            "strokeColor":"#311ee5",
            "strokeWeight":"3",
            "strokeOpacity":0.6
         }
      }
   ]
}

/**** POINT STYLE BY ATTRIBUTE ****/
{  
   "name":"Point Style By Attribute",
   "id" : 1,
   "attributeName":"n",
   "stylesPerAttributeValue":[  
      {  
         "attributeValue":"1650",
         "style":{  
            "fillColor":"#1ee56e",
            "fillOpacity":0.3,
            "strokeColor":"#1e88e5",
            "strokeWeight":"1",
            "strokeOpacity":0.6
         }
      },
      {  
         "attributeValue":"1649",
         "style":{  
            "fillColor":"#1ee56e",
            "fillOpacity":0.3,
            "strokeColor":"#1e88e5",
            "strokeWeight":"1",
            "strokeOpacity":0.6
         }
      }
   ]
}

📘

Appending the style id

Please note that the style JSON must contain an id property which corresponds to the style id returned right after the style has been added.

JavaScript

var polygonGlobalStyle = {  
   "name":"Polygon Global Style",
   "fillColor":"#e94291",
   "fillOpacity":0.7,
   "strokeColor":"#e94291",
   "strokeWeight":"1",
   "strokeOpacity":0.7
};

function onYoumapsApiLoaded(){
  console.log("YoumapsAPI loaded!");
  youmapsApi.displayMapdata(<MAPDATA_ID>);
	youmapsApi.hideMapdata(<MAPDATA_ID>);
  youmapsApi.addMapdataStyle(<MAPDATA_ID>, polygonGlobalStyle, Constant.GLOBAL_STYLE, function(styleId){
  	console.log("New style with id " + styleId + " added to mapdata.");
    polygonGlobalStyle["id"] = styleId;
  	youmapsApi.setMapdataStyle(<MAPDATA_ID>, polygonGlobalStyle, Constant.GLOBAL_STYLE, onStyleSet);
  });
}

function onStyleSet(){
  console.log("Style has been applied to mapdata.");
}
  
var mapOptions = {  
  center : new google.maps.LatLng(48.858386, 2.343435), // Paris,
  zoom : 11,
  minZoom : 6,
  maxZoom : 17
};

var youmapsApi = new YoumapsAPI(
  {
    techID : <YOUR_TECH_ID>, 
    initMapboards : true,
    mapDivId : "map",
    mapOptions : mapOptions
  },
  onYoumapsApiLoaded
);