Examples

Basic
    Layers
      Geometry
      User Interaction
        Camera
          Styles
            Events
              Services

                Add a circle using Geo JSON on the map

                Add items on the map using a GeoJSON to specify position and different properties.

                Code sources:

                <!DOCTYPE html>
                <html lang="en">
                ...
                <link rel="stylesheet" href="https://nsimtech.com/maps/latest/nsim.css">
                <script src="https://nsimtech.com/maps/latest/nsim.api.min.js"></script>
                ...
                <script">
                    var map;
                    NSim.API.Map.OnReady = function () {
                         map = new NSim.API.Map("Map", "maps.nsimtech.com", mapKey);
                         
                         map.SetPosition(-70.93, 46.466);
                    }
                
                    // Add a GeoJson with multiple features
                    function addGeoJSON() {
                            
                        map.AddMapItems(
                           {                 
                              "type": "Feature",
                              "properties": {
                                "name": "MyCircle",
                                "color": "#0000ff90",                           
                                "size": "24",
                                "profil": "local",
                                "customProp1": "value1"
                              },
                                "geometry": {
                                  "type": "Circle",
                                  "radius":1000,
                                  "coordinates": [[-71.23, 46.466]]
                                  }
                           });
                    }
                </script>
                ...
                <div id="Map"/>
                ...
                <button onclick="addGeoJSON()">Add Circle</button>
                ...
                </html>