0

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 ?

1
  • 2
    What did you try already? Which errors did you receive?
    – kurunve
    Commented Mar 20, 2017 at 16:47

1 Answer 1

0

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

enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .