Render an Esri ArcGIS map on a WordPress page. Use any Esri basemap, public layers, public web map or web scene.

John Foster

<p>This Esri maps plugin enables you to display Esri/ArcGIS maps or scenes with shortcodes. Select a basemap, set an initial viewpoint, add your custom layers, show information in a pop-up, and more. Or start with a pre-configured web map or web scene. You can also add a search widget to the map.</p>
<p>This is based on the custom web component <a href="https://github.com/jf990/esri-map-component" rel="nofollow ugc">esri-map-view</a>.</p>
<h3>Features</h3>
<ul>
<li>Use Esri’s world-renowned authoritative map services in your WordPress blog.</li>
<li>Select from any Esri basemap.</li>
<li>Set an initial viewpoint and zoom level.</li>
<li>Add a marker and pop-up to the initial viewpoint.</li>
<li>Add a search widget to your map or scene.</li>
<li>Display map on posts/pages using the WordPress shortcode syntax.</li>
<li>Set your map height and width.</li>
<li>Set map zoom level.</li>
</ul>
<p>This plugin uses a 3rd party service provided by <a href="https://esri.com" rel="nofollow ugc">Esri</a>. No personal identifiable information or telemetry data is recorded. Esri takes the responsibility to protect your privacy seriously. Esri holds itself to the highest national and international standards, including <a href="https://www.privacyshield.gov/participant?id=a2zt00000004EspAAE" rel="nofollow ugc">Privacy Shield certification</a> and GDPR compliance. View the <a href="https://www.esri.com/en-us/privacy/overview" rel="nofollow ugc">privacy policy</a>.</p>
<h3>Usage</h3>
<ol>
<li>On any <em>page</em> or <em>post</em>, add a new block, then select <code>[/]</code> shortcode.</li>
<li>Use either <code>esri-map-view</code> or <code>esri-scene-view</code> shortcode, as follows. All attributes except <code>height</code> are optional.</li>
</ol>
<h3>Map</h3>
<pre><code>[esri-map-view height="900px" basemap="arcgis/imagery" viewpoint="13.3761697,52.5166449,15" layers="d3e5c29f5e404aa4b2de29a9f0e37996" search="top-right" symbol="pin:red" symboloffset="0,0" popuptitle="Brandenburg Gate" popupinfo="This is a historic place you should visit" apikey="YOUR_API_KEY"][/esri-map-view]
</code></pre>
<ul>
<li><code>esri-map-view</code> opening shortcode tag for a 2D map.</li>
<li><code>height</code>: indicate the height you want for your map. You must provide a height. The width will automatically scale to the full page width of your page or post.</li>
<li><code>apikey</code>: include your <a href="https://developers.arcgis.com/documentation/security-and-authentication/api-key-authentication/api-key-credentials/" rel="nofollow ugc">API key</a> to authenticate service requests with ArcGIS services.</li>
<li><code>basemap</code>: indicate the basemap style you want to use. Select from <a href="https://developers.arcgis.com/rest/basemap-styles/#arcgis-styles" rel="nofollow ugc">available basemap styles</a>. This is optional and will default to <strong>osm/standard</strong>. This attribute is ignored if <code>webmap</code> is set.</li>
<li><code>webmap</code>: select an ArcGIS web map item ID. If this is provided the <code>basemap</code> attribute is ignored.</li>
<li><code>viewpoint</code>: Indicate an initial viewpoint to focus the map. This is a string of 3 comma-separated numbers expected: latitude (y), longitude (x), and levelOfDetail (LOD). Example: “22.7783,34.1234,9”. You should set this if you set a <code>basemap</code>. You do not need to set this if you set <code>webmap</code> as the web map’s initial viewpoint would be used. If you do set <code>viewpoint</code> and <code>webmap</code> then this setting will override the initial viewpoint of the web map.</li>
<li><code>layers</code>: Select layers to add on top of the map using either full URL to the feature service on an ArcGIS server (must be public) or the ArcGIS Online item ID of a public layer. Multiple layers are separated with comma <code>,</code>.</li>
<li><code>symbol</code>: Indicate a symbol to use to mark the location of the initial viewpoint. This is the fully qualified URL to a 64×64 px PNG image. CORS is respected when accessing the image. You can also specify <code>green-pin</code> to use a green map pin as the symbol.</li>
<li><code>popupinfo</code>: If <code>symbol</code> is set, tapping the image will show a pop-up. This is the <code>content</code> for that pop-up.</li>
<li><code>popuptitle</code>: If <code>symbol</code> is set, tapping the image will show a pop-up. This is the <code>title</code> for that pop-up.</li>
<li><code>search</code>: Include a search widget by indicating where on the map view it should appear. The valid values for this attribute are <code>top-left</code>, <code>top-right</code>, <code>bottom-left</code>, <code>bottom-right</code>. If this attribute is empty/missing or an invalid value then a search widget will not show.</li>
<li><code>[/esri-map-view]</code>: Closing tag is required. Do not forget the closing tag!</li>
</ul>
<h3>Scene</h3>
<pre><code>[esri-scene-view height="900px" basemap="arcgis/imagery" viewpoint="13.3761697,52.5166449,15" layers="d3e5c29f5e404aa4b2de29a9f0e37996" search="top-right" symbol="pin:red" symboloffset="0,0" popuptitle="Brandenburg Gate" popupinfo="This is a historic place you should visit" apikey="YOUR_API_KEY"][/esri-scene-view]
</code></pre>
<ul>
<li><code>esri-scene-view</code> opening shortcode tag for a 3D globe.</li>
<li><code>height</code>: indicate the height you want for your map. You must provide a height. The width will automatically scale to the full page width of your page or post.</li>
<li><code>apikey</code>: include your <a href="https://developers.arcgis.com/documentation/security-and-authentication/api-key-authentication/api-key-credentials/" rel="nofollow ugc">API key</a> to authenticate service requests with ArcGIS services.</li>
<li><code>basemap</code>: indicate the basemap style you want to use. Select from <a href="https://developers.arcgis.com/rest/basemap-styles/#arcgis-styles" rel="nofollow ugc">available basemap styles</a>. This is optional and will default to <strong>osm/standard</strong>. This attribute is ignored if <code>webmap</code> is set.</li>
<li><code>webscene</code>: select an ArcGIS web scene item ID. If this is provided the <code>basemap</code> attribute is ignored.</li>
<li><code>cameraposition</code>: Indicate the camera position for the initial scene viewpoint. This is a string of five comma separated numbers as follows: x,y,z,heading,tilt. If you set this it will override <code>viewpoint</code> settings.</li>
<li><code>viewpoint</code>: Indicate an initial viewpoint to focus the map. This is a string of 3 comma-separated numbers expected: latitude (y), longitude (x), and levelOfDetail (LOD). Example: “22.7783,34.1234,9”. You should set this if you set a <code>basemap</code>. You do not need to set this if you set <code>webscene</code> as the web scene’s initial viewpoint is used. However, this setting will override the web scenes initial viewpoint. The <code>viewpoint</code> is not used if <code>cameraPosition</code> is also set. For 3D scenes, the level of detail is translated into a 3D camera position height of Z-axis position.</li>
<li><code>layers</code>: Select layers to add on top of the map using either full URL to the feature service on an ArcGIS server (must be public) or the ArcGIS Online item ID of a public layer. Multiple layers are separated with comma <code>,</code>.</li>
<li><code>symbol</code>: Indicate a symbol to use to mark the location of the initial viewpoint. This is the fully qualified URL to a 64×64 px PNG image. CORS is respected when accessing the image. You can also specify <code>green-pin</code> to use a green map pin as the symbol.</li>
<li><code>popupinfo</code>: If <code>symbol</code> is set, tapping the image will show a pop-up. This is the <code>content</code> for that pop-up.</li>
<li><code>popuptitle</code>: If <code>symbol</code> is set, tapping the image will show a pop-up. This is the <code>title</code> for that pop-up.</li>
<li><code>search</code>: Include a search widget by indicating where on the map view it should appear. The valid values for this attribute are <code>top-left</code>, <code>top-right</code>, <code>bottom-left</code>, <code>bottom-right</code>. If this attribute is empty/missing or an invalid value then a search widget will not show.</li>
<li><code>[/esri-scene-view]</code>: Closing tag is required. Do not forget the closing tag!</li>
</ul>
<h3>License</h3>
<p><a href="./LICENSE" rel="nofollow ugc">MIT License Copyright 2025 John Foster</a></p>


Alternatives to esri-map-view

Top alternatives