NPMap5 map with MDX

Published on: Sun Dec 17 2023

<Counter />

Insert a Counter here:

NPMapTrail

cd public/trails
// public/trails/longhusky.geojson
wget https://svcdev.nps.gov/data/api/v1/sites/19c5db4f-70ba-44d4-8401-a27e52f8dde5?apikey=KXuXrDdge2Csv0xbC01JhhNNaDGcmICX&format=geojson

// http://192.168.1.31:3141/maps/web/trails/longhusky.geojson


  <NPMapTrail trailDataUrl="http://192.168.1.31:3141/maps/web/trails/longhusky.geojson" />

/NPMapTrail

  // Import npm modules.
  // import NPMapTrail from "@npmap/trail"

  let trailId = '19c5db4f-70ba-44d4-8401-a27e52f8dde5';
  let url = `https://svcdev.nps.gov/data/api/v1/sites/${trailId}?apikey=KXuXrDdge2Csv0xbC01JhhNNaDGcmICX&format=geojson`;

  <NPMapTrail trailDataUrl={url} />

  <NPMapTrail trailDataUrl="https://svcdev.nps.gov/data/api/v1/sites/19c5db4f-70ba-44d4-8401-a27e52f8dde5?apikey=KXuXrDdge2Csv0xbC01JhhNNaDGcmICX&format=geojson" />

NPMap5 React Demo

<NPMap5
  container="mapdiv"
  latitude="32.870381"
  longitude="-116.98891"
  zoom="5"
  mapstyle="mapbox://styles/atlas-user/ck58pyquo009v01p99xebegr9"
/>

A NPMap5 map inserted into the page using a React component.