Using ESRI Maps in Salesforce via Javascript API

Question

I am building a visualforce page that displays the geo-location of users in an ESRI Map (Not Google Map for reasons). The data is in a cusotm Location object with username, latitude and longitude. I am trying to reference their javascript API to visualize the data with markers showing these results, but unable to do so.

Anyone has a guide/reference document on how to go about this ?

Answer 1

You can find many similar examples in StackOver flow like this one. In summary, you have to create a Point with longitude and latitude and add it as a GraphicsLayer on the MAP. You can put all the JavaScript codes as described in the link in a VF page and it will give you the desired result. Here is an example with hard coded longitude and latitude, you have to make it dynamic based on your requirement.

<apex:page>
    <script type="text/javascript" src="https://js.arcgis.com/3.18/init.js"></script>
    <script type="text/javascript" src="https://js.arcgis.com/3.17/esri/css/esri.css"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css"></link>
    <style type="text/css">
        #map, .map.container {
            padding:0;
            margin:0;
            height:100%;
        }

        #updatingProgress {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1
        }

        /* hide the progress bar when map isn't updating */
        #map:not([data-updating]) #updatingProgress {
            display: none;
        }        
    </style>
    <script>
        require(["esri/map"], function (Map) {
            var map;

            map = new Map("map", {
                basemap: "streets",
                center: [-73.985130, 40.758896],
                zoom: 10,
                showAttribution: true
            });
            var point = new esri.geometry.Point(-73.985130, 40.758896);
            point = esri.geometry.geographicToWebMercator(point);
            var symbol = new esri.symbol.PictureMarkerSymbol("http://maps.google.com/mapfiles/ms/icons/blue-dot.png", 32, 32);
            var graphic = new esri.Graphic(point, symbol);
            var layer = new esri.layers.GraphicsLayer();
            layer.add(graphic);
            map.addLayer(layer);    
        });
    </script>
    <div id="map">
        <progress id="updatingProgress">Updating map...</progress>
    </div>
</apex:page>

ESRI Map in action