YoumapsAPI.addMapdataStyle

📘

Related REST API method

Take a look at addStyle.

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

Adds a style to the given TileLayer/MarkerLayer.
Returns the new style id as a parameter to the callback function.

📘

Prerequisite

The Mapboard instance to which belongs the mapdata must be loaded before you can add a style to the mapdata 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",
   "fillColor":"#e94291",
   "fillOpacity":0.7,
   "strokeColor":"#e94291",
   "strokeWeight":"1",
   "strokeOpacity":0.7
}

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

/**** POINT GLOBAL STYLE ****/
{  
   "name":"Point Global Style",
   "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",
   "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",
   "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",
   "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
         }
      }
   ]
}

📘

Adding a style

Keep in mind that the example below doesn't apply the style to the given mapdata.
The style is just added to the available list of styles.

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

function onStyleAdded(styleId){
	console.log("New style with id " + styleId + " added 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
);