require(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/Point"], function(Map, MapView, Graphic, Point) const map = new Map( basemap: "streets-navigation-vector" );
// ESRI default marker (red pin) const point = new Point( longitude: -118.2437, latitude: 34.0522 ); esri default marker
Here’s a clean feature, modeled after the classic red pin used in ArcGIS Online, ArcGIS API for JavaScript, and many ESRI maps. Feature Object (GeoJSON format) "type": "Feature", "geometry": "type": "Point", "coordinates": [-118.2437, 34.0522] , "properties": "title": "ESRI Default Location", "description": "Example point using ESRI default marker style", "marker-symbol": "marker", "marker-color": "#E32F2F", "marker-size": "medium" latitude: 34.0522 )
map.add(graphic); ); | Property | ESRI Default Value | |----------|--------------------| | Shape | Circle (or teardrop in some contexts) | | Fill Color | #E32F2F (ESRI Red) | | Size | 12px (medium) | | Outline | White, 2px width | | Opacity | 1.0 (solid) | Alternative Representation (Leaflet with ESRI lookalike) // If you want ESRI-style marker in Leaflet const esriIcon = L.divIcon( className: 'esri-default-marker', html: '<div style="background-color:#E32F2F; width:12px; height:12px; border:2px solid white; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.3);"></div>', iconSize: [12, 12], popupAnchor: [0, -6] ); L.marker([34.0522, -118.2437], icon: esriIcon ) .addTo(map) .bindPopup("ESRI default marker"); Here’s a clean feature
This gives you the look used across their web mapping platforms.
const markerSymbol = type: "simple-marker", style: "circle", color: [227, 47, 47], // ESRI red size: 12, outline: color: [255, 255, 255], width: 2 ;
const graphic = new Graphic( geometry: point, symbol: markerSymbol, attributes: name: "Sample Location" );