none
IFrameable Configuration Map: How to create the JSON Configuration File? RRS feed

  • Question

  • With regards to the article here on 'IFrameable Configuration Map Example', what is the best method for creating the Configuration File in JSON format? 

    Do I need to do this manually i.e. rewrite my javascript into json format? 

    I see from the configuration file sample that:

    Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
        var layer = new Microsoft.Maps.GeoXmlLayer('https://bingmapsv8samples.azurewebsites.net/Common/data/kml/SampleKml.kml');
        map.layers.insert(layer);


    looks like this in JSON: 

    {
          "moduleName": "Microsoft.Maps.GeoXml",
          "moduleOptions": [
            {
              "addLayerFromUrl": "https://bingmapsisdk.blob.core.windows.net/isdksamples/Countries.xml",
              "geoXmlOption": {
                "layerName": "foo",
                "_comment": "other options are autoUpdateMapView, infoboxOptions, suppressInfoboxes, visible"
              }
            }

    I have no idea how to change the JS below into JSON.... 


    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
              center: new Microsoft.Maps.Location(4.318729, 148.452588),
              zoom: 2
    });
    
    
    //Pushin Zooms 2 Layer3
            var layer3 = new Microsoft.Maps.Layer();
            //Add zoom information as metadata of the layer. 
            layer3.metadata = {
              zoomRange: {
                min: 1,
                max: 7
              }
            };
            var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(36.457226, 138.906677), {
              icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
              anchor: new Microsoft.Maps.Point(12, 28)
            });
            layer3.add(pushpin);
            Microsoft.Maps.Events.addHandler(pushpin, 'click', function(args) {
              map.setView({
                center: args.target.getLocation(),
                zoom: 8
              });
            });
            //Add layer to map. 
            map.layers.insert(layer3);
    
    
            //Add a viewchangeend event to the map so that it updates the visibility of the layers. 
            Microsoft.Maps.Events.addHandler(map, 'viewchangeend', updateLayerVisibility);
            //Do an initial update of the visibility. 
            updateLayerVisibility();
            function updateLayerVisibility() {
              //Get the current zoom level of the map. 
              var zoom = map.getZoom();
              var layer;
              //Loop through the layers in the map and check to see if it has zoomRange metadata. 
              for (var i = 0; i < map.layers.length; i++) {
                layer = map.layers[i];
                if (layer.metadata && layer.metadata.zoomRange) {
                  if (zoom >= layer.metadata.zoomRange.min && zoom <= layer.metadata.zoomRange.max) {
                    layer.setVisible(true);
                  } else {
                    layer.setVisible(false);
                  }
                }
              }
            }
          










    Sunday, March 10, 2019 12:59 PM

All replies

  • Doing some more reading:  Configuration Driven Maps framework

    Configurable Map Module Object:  Defines which module should be loaded, and the data sets that should be loaded with it. Currently supports the "Microsoft.Maps.GeoXml" and "Microsoft.Maps.GeoJson" modules. Additional modules can be specified and will be loaded, but will not do anything other than load those modules into the web app, which is useful when loading the configuration file via the ConfigurableMap class.

    For clarification, the Configuration Driven Maps framework only supports the GeoXml & GeoJson modules?  

    This suggests the framework is only meant for relatively basic maps. To build more complex maps, use the Bing Maps V8 SDK. 


    Monday, March 11, 2019 4:39 AM
  • Hi Nick,

    Can you give us a better idea of what you are hoping to accomplish? 

    1. Configuration example:https://www.bing.com/api/maps/sdk/mapcontrol/isdk/loadmapfromconfig 

    2. GeoJSON/GeoXML ingestion: https://www.bing.com/api/maps/sdk/mapcontrol/isdk/geojsonreadexternal

    See the left menu on the interactive SDK for more samples.

    Sincerely,

    IoTGirl


    Monday, March 11, 2019 6:27 PM
    Owner

  • Can you give us a better idea of what you are hoping to accomplish? 


    I plan to create a simple Configuration Driven Map with points from a traffic camera's geojson - and just trying to figure out how it works. 


    Could you please:

    1. Confirm what can go into the config.json file.  I.E. just the GeoJSON/GeoXML modules, not Map Control things like pushpins etc (initially I thought anything could go in there :) ) 

    2. Help me out with setting-up the InfoboxOptions in the config.json, specifically the htmlContent.  I would like to display the "imageUrl" image in the infobox (see samples below).  

    My config.json attempt: 

    "geoXmlOption": {
                "layerName": "Pedestrian crossings",
                "infoboxOptions": "description, 
                "htmlContent" : "'<img src=" ' + "imageUrl" + '" width="128" height="128" />'" 

    Sample of the Geojson I'm working with: 

    {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            "OBJECTID": 1,
            "def": "traffic-cameras",
            "id": 130,
            "name": "SH16 1 Bond St",
            "direction": "Westbound",
            "description": "Bond St looking West",
            "imageUrl": "http://www.info/camera/130.jpg",
            "thumbUrl": "http://www.info/camera/thumb/130.jpg",
            "group_": "SH16-North-Western",
            "region": "Sydney",
            "offline": "false",
            "underMaintenance": "false",
            "updateDate": "2016-06-12T11:00:27.186-07:00",
            "lat": -36.869,
            "lon": 174.746,
            "coords": "174.746,-36.869"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [
              174.7460000000001,
              -36.86899999999997
            ]
          }
        },

    Thanks! 

    Tuesday, March 12, 2019 4:37 AM
  • Hi Nick,

    I have reached out to the Bing Maps Enterprise Support Team to help you with this question.  

    Sincerely,

    IoTGirl

    Tuesday, March 12, 2019 3:39 PM
    Owner
  • Hello, 

    I am from the Bing Maps Enterprise Support team.

    1.  What can go into the config.json file is documented here: 

    https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/configurablemapmodule-object

    This link was provided previously by IoTGirl.  This is just to load the Map Options and modules, as per the documentation.

    In the Iframe example:

    https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/configuration-driven-maps-framework/iframeable-configuration-map-example

    It is a way to loading everything just through a single src.  The Config file is just to set up the map options, and the GeoJSON/GeoXML layers.

    2. The method outlined in the iframe example would only be for displaying the elements in the GeoJSON/GeoXML file.  With any Mapoptions you set.  

    Here are all the documented MapOptions: https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/mapoptions-object

    Please clarify your questions, if I was not able to address them directly.

    It sounds like you are looking at implementing the mapcontrol and modules with full code rather than using the Configuration Map Method.  If you can let us know more about your use case we may be able to suggest alternatives.  

    Regards,

    Stephen


    Tuesday, March 12, 2019 9:27 PM
    Moderator
  • Thanks Stephen & IoTGirl.  

    I now more or less understand how the Configuration Map method works - which was my problem :) . 

    Here's a test config map I made:

    bing.com/maps/configurable?config=https......washington.json

    One issue, the map does not scale correctly depending on the mobile browser (see images below). 


    Android browser vs iPhone browser. 

    Android Browser   iPhone Browser

    Sunday, March 17, 2019 3:18 AM