Changing the color of a default pin RRS feed

  • Question

  • Is there way to change the default pin color from blue to any other color like orange or green? I know I can put in a custom image but if it's possible to change the color of the default pin that would be best. 


    Thursday, May 9, 2019 5:30 PM

All replies

  • Is it possible for you to share some code that shows how you are creating the pin?

    you can see HtmlMarkerOptions interface  https://docs.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.htmlmarkeroptions?view=azure-iot-typescript-latest

    and there is an example here: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/HTML%20Markers/Simple%20HTML%20Marker.html

    var map; function GetMap() { //Initialize a map instance. map = new atlas.Map('myMap', { //Add your Azure Maps subscription key to the map SDK.

    //Get an Azure Maps key at https://azure.com/maps authOptions: { authType: 'subscriptionKey', subscriptionKey: '<Your Azure Maps Key>' } }); //Wait until the map resources are ready. map.events.add('ready', function () { //Create a HTML marker and add it to the map. //Here you can customize please read the //HtmlMarkerOptions interface doc I linked to map.markers.add(new atlas.HtmlMarker({ color: 'DodgerBlue', text: '10', position: [0, 0] })); }); }

    Thursday, May 9, 2019 11:08 PM
  • If using SymbolLayers, there are several markers that have the same style but different colors as documented here. Additionally, we are also working on exposing a template generator where you can specify your own colors and an icon will be generated.
    Monday, May 13, 2019 3:48 PM
  • Hi Alberto,

    Thanks for the reply. At the moment, I'm creating the pin using a symbolLayer. I'm creating a custom image that I add to the symbol layer but this only allows me to add one custom image. For example, if I have an object that requires a blue pin and an object that require a red pin, is there a way that I can do that all in the same symbolLayer? I'm iterating through an array and for each one I'd like to add a custom image for the pin instead of creating a symbol layer with only one custom image for all points.



    • Edited by rwcrwc Monday, May 13, 2019 8:21 PM
    Monday, May 13, 2019 6:16 PM
  • Hey Ricky,

    Thanks for the reply. Yeah I saw that documentation but looking for something a bit more substantial. Right now, using a custom image would work great. Just trying to find a way to have multiple custom images on the same symbol layer. I'm iterating through an array and for each one I'd like to add a custom image for the pin instead of creating a symbol layer with only one custom image for all points.

    • Edited by rwcrwc Monday, May 13, 2019 8:21 PM
    Monday, May 13, 2019 6:32 PM
  • There are a couple of ways to use multiple images with a single Symbol layer. The first option is to the icon image name as a property of each shape (lets call it "icon") then set the image option of the symbol with the following expression ['get', 'icon']. This will use the image name specified in the icon property of the shape. 

    The second option is to use a more complete expression that looks at the properties of the shape to determine which image to use for the icon. A case expression acts like an if-statement, while a match expression acts like a switch statement. A bunch of documentation on expressions here: https://docs.microsoft.com/en-us/azure/azure-maps/data-driven-style-expressions-web-sdk

    This is a good example that uses a match expression to determine a color for a bubble layer. Similar logic can be used to set the image icon value: https://azuremapscodesamples.azurewebsites.net/index.html?sample=Load%20POIs%20as%20the%20map%20moves

    This sample shows how to load multiple icons into the map in parallel by using Promise.all: https://azuremapscodesamples.azurewebsites.net/index.html?sample=Display%20clusters%20with%20a%20Symbol%20Layer

    Tuesday, May 14, 2019 12:14 AM
  • Just created a new sample that uses multiple image icons within a single symbol layer: https://azuremapscodesamples.azurewebsites.net/?sample=Data-driven%20symbol%20icons
    Wednesday, May 15, 2019 12:38 AM
  • Hey Ricky,

    Thanks on the info, the expression documentation definitely helped. I had a question about the data driven symbol icons example where the match expression within the iconOptions was being called. Where does Entity Type get declared? Is that a property of the bubblelayer or it is something that was created when the point was created? Also, when you use the 'get' expression, does it automatically look in the properties of the point that was created to find the attribute you're looking for? I currently have a property in my point called "color" and I'm trying to run a match expression to display the right color for each but it keeps pointing to the default. So possibly I'm point the "get" expression to the wrong place? 

            let symbolLayer = new window.atlas.layer.SymbolLayer(
                iconOptions: {
                  allowOverlap: true,
                  image: [
                    ["get", "color"],
                    //For each entity type, specify the icon name to use.
                    "sponsor", "sponsorPin",
                    "rti", "educatorPin",
                    "intermediary", "intermediaryPin",
                    "oa", "oaSaaPin",
                    "saa", "oaSaaPin",
                    //Default fallback icon.
                  size: size
                textOptions: {
                  textField: ["get", "point_count"],
                  offset: [0, -1.3],
                  color: "red",
                  size: 13

    Wednesday, May 15, 2019 7:38 PM
  • The EntityType value is a property on the data set I used in the example. For your application I would assume you have some sort of property in your data that would help you determine what icon you want to use. This could be a simple string value/Enum, or more complex expression could be used to process a calculation on numbers to determine the right icon (i.e. if revenue low, use the red icon).
    Wednesday, May 15, 2019 9:25 PM