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 ?

  • 2
    What did you try already? Which errors did you receive? – kurunve Mar 20 '17 at 16:47
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.