Mintlify Docs Edits

maps/maps.mdx

@@ -1,14 +1,14 @@
 ---
 title: "Maps"
 ---
-import Map from '../../src/components/Map.jsx'
-import FitBoundsMap from '../../src/components/examples/FitBoundsMap.jsx'
-import CustomImageMarkerMap from '../../src/components/examples/CustomImageMarkerMap.jsx'
-import CustomLanguageMap from '../../src/components/examples/CustomLanguageMap.jsx'
-import CustomPopupMap from '../../src/components/examples/CustomPopupMap.jsx'
-import RouteMap from '../../src/components/examples/RouteMap.jsx'
-import PolygonMap from '../../src/components/examples/PolygonMap.jsx'
-import GlobeMap from '../../src/components/examples/GlobeMap.jsx'
+import Map from '../snippets/components/Map.jsx'
+import FitBoundsMap from '../snippets/components/examples/FitBoundsMap.jsx'
+import CustomImageMarkerMap from '../snippets/components/examples/CustomImageMarkerMap.jsx'
+import CustomLanguageMap from '../snippets/components/examples/CustomLanguageMap.jsx'
+import CustomPopupMap from '../snippets/components/examples/CustomPopupMap.jsx'
+import RouteMap from '../snippets/components/examples/RouteMap.jsx'
+import PolygonMap from '../snippets/components/examples/PolygonMap.jsx'
+import GlobeMap from '../snippets/components/examples/GlobeMap.jsx'
 
 Radar Maps is a cost-effective alternative to Google Maps Platform and Mapbox.
 

snippets/components/Map.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Radar from 'radar-sdk-js';
+
+import 'radar-sdk-js/dist/radar.css';
+
+const PUBLISHABLE_KEY = 'org_test_pk_7e1e22718af02cb9ed4a01233556999c2c02c947'; // same key as /demo/api
+
+class Map extends React.Component {
+  componentDidMount() {
+    Radar.initialize(PUBLISHABLE_KEY);
+
+    const map = Radar.ui.map({
+      container: 'default-map',
+      center: [-73.9911, 40.7342], // NYC
+      zoom: 14,
+    });
+
+    Radar.ui.marker({ text: 'Radar HQ' })
+      .setLngLat([-73.9910078, 40.7342465])
+      .addTo(map);
+  }
+
+  render() {
+    return (
+      <div id="map-container" style={{ height: '400px', margin: '1rem 0 1.5rem', position: 'relative', width: '95%' }}>
+        <div id="default-map" style={{ bottom: 0, position: 'absolute', top: 0, width: '100%' }} />
+      </div>
+    );
+  }
+};
+
+export default Map;

snippets/components/examples/CustomImageMarkerMap.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Radar from 'radar-sdk-js';
+
+import 'radar-sdk-js/dist/radar.css';
+
+const PUBLISHABLE_KEY = 'org_test_pk_7e1e22718af02cb9ed4a01233556999c2c02c947'; // same key as /demo/api
+
+class CustomImageMarkerMap extends React.Component {
+  componentDidMount() {
+    Radar.initialize(PUBLISHABLE_KEY);
+
+    const map = Radar.ui.map({
+      container: 'custom-image-map',
+      center: [-73.9911, 40.7342], // NYC
+      zoom: 14,
+    });
+
+    map.on('load', () => {
+      const { lng, lat } = map.getCenter();
+
+      // add marker to map at map center
+      Radar.ui.marker({
+        url: 'https://radar.com/static/image/logo.png',
+        width: '48px',
+        height: '48px',
+        popup: {
+          text: 'Radar HQ',
+        },
+      })
+      .setLngLat([lng, lat])
+      .addTo(map);
+    });
+  }
+
+  render() {
+    return (
+      <div style={{ height: '400px', margin: '1rem 0 1.5rem', position: 'relative', width: '100%' }}>
+        <div id="custom-image-map" style={{ bottom: 0, position: 'absolute', top: 0, width: '100%' }} />
+      </div>
+    );
+  }
+};
+
+export default CustomImageMarkerMap;

snippets/components/examples/CustomLanguageMap.jsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import Radar from 'radar-sdk-js';
+
+import CodeBlock from '../../theme/CodeBlock';
+
+import 'radar-sdk-js/dist/radar.css';
+
+const PUBLISHABLE_KEY = 'org_test_pk_7e1e22718af02cb9ed4a01233556999c2c02c947'; // same key as /demo/api
+
+export const LANGUAGES = Object.freeze([
+  { 'code': 'local', 'language': 'Local' },
+  { 'code': 'en', 'language': 'English' },
+  { 'code': 'fr', 'language': 'French' },
+  { 'code': 'de', 'language': 'German' },
+  { 'code': 'es', 'language': 'Spanish' },
+  { 'code': 'ja', 'language': 'Japanese' },
+  { 'code': 'pt', 'language': 'Portuguese' },
+  { 'code': 'it', 'language': 'Italian' },
+  { 'code': 'ru', 'language': 'Russian' },
+  { 'code': 'nl', 'language': 'Dutch' },
+  { 'code': 'zh', 'language': 'Chinese' },
+  { 'code': 'pl', 'language': 'Polish' },
+  { 'code': 'ca', 'language': 'Catalan' },
+  { 'code': 'th', 'language': 'Thai' },
+  { 'code': 'uk', 'language': 'Ukrainian' },
+  { 'code': 'da', 'language': 'Danish' },
+  { 'code': 'sv', 'language': 'Swedish' },
+  { 'code': 'id', 'language': 'Indonesian' },
+  { 'code': 'ko', 'language': 'Korean' },
+  { 'code': 'hu', 'language': 'Hungarian' },
+  { 'code': 'cs', 'language': 'Czech' },
+  { 'code': 'ro', 'language': 'Romanian' },
+  { 'code': 'nb', 'language': 'Norwegian (Bokmål)' },
+  { 'code': 'ar', 'language': 'Arabic' },
+  { 'code': 'fi', 'language': 'Finnish' },
+  { 'code': 'tr', 'language': 'Turkish' },
+  { 'code': 'ms', 'language': 'Malay' },
+  { 'code': 'el', 'language': 'Greek' },
+  { 'code': 'be', 'language': 'Belarusian' },
+  { 'code': 'fa', 'language': 'Farsi' },
+  { 'code': 'bg', 'language': 'Bulgarian' },
+  { 'code': 'sr', 'language': 'Serbian' },
+  { 'code': 'hr', 'language': 'Croatian' },
+  { 'code': 'gl', 'language': 'Galician' },
+  { 'code': 'he', 'language': 'Hebrew' },
+  { 'code': 'vi', 'language': 'Vietnamese' },
+  { 'code': 'sk', 'language': 'Slovak' },
+  { 'code': 'ka', 'language': 'Georgian' },
+  { 'code': 'lt', 'language': 'Lithuanian' },
+  { 'code': 'sl', 'language': 'Slovene' },
+  { 'code': 'ga', 'language': 'Irish' },
+  { 'code': 'eu', 'language': 'Basque' },
+  { 'code': 'lv', 'language': 'Latvian' },
+  { 'code': 'et', 'language': 'Estonian' },
+  { 'code': 'bs', 'language': 'Bosnian' },
+  { 'code': 'kk', 'language': 'Kazakh' },
+  { 'code': 'kn', 'language': 'Kannada' },
+  { 'code': 'cy', 'language': 'Welsh' },
+  { 'code': 'br', 'language': 'Breton' },
+  { 'code': 'ne', 'language': 'Nepali' },
+  { 'code': 'si', 'language': 'Sinhalese' },
+  { 'code': 'az', 'language': 'Azerbaijani' },
+  { 'code': 'mk', 'language': 'Macedonian' },
+  { 'code': 'mt', 'language': 'Maltese' },
+  { 'code': 'sq', 'language': 'Albanian' },
+  { 'code': 'is', 'language': 'Icelandic' },
+  { 'code': 'mr', 'language': 'Marathi' },
+  { 'code': 'mn', 'language': 'Mongolian' },
+  { 'code': 'am', 'language': 'Amharic' },
+  { 'code': 'bn', 'language': 'Bengali' },
+  { 'code': 'hy', 'language': 'Armenian' },
+  { 'code': 'hi', 'language': 'Hindi' },
+  { 'code': 'ky', 'language': 'Kyrgyz' },
+  { 'code': 'lo', 'language': 'Lao' },
+]);
+
+const htmlSnippet = (language) =>
+`<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <link href="https://js.radar.com/$RADAR_WEB_SDK_VERSION$/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/$RADAR_WEB_SDK_VERSION$/radar.min.js"></script>
+  </head>
+
+  <body>
+    <div id="map" style="width: 100%; height: 400px;" />
+
+    <script type="text/javascript">
+      Radar.initialize('prj_live_pk_...');
+
+      // create map
+      const map = Radar.ui.map({
+        container: 'map',
+        language: '${language}',
+      });
+
+    </script>
+  </body>
+</html>
+`;
+
+class CustomLanguageMap extends React.Component {
+  state = {
+    language: 'local',
+  };
+
+  componentDidMount() {
+    const { language } = this.state;
+
+    Radar.initialize(PUBLISHABLE_KEY);
+
+    const map = Radar.ui.map({
+      container: 'custom-language-map',
+      language,
+    });
+    this.setState({ map });
+  }
+
+  handleLanguageChange = (e) => {
+    const { map } = this.state;
+
+    // get state from current map and remove
+    const { lat, lng } = map.getCenter();
+    const zoom = map.getZoom();
+    map.remove();
+
+    // add new map with language at previous state
+    const language = e.target.value;
+    const newMap = Radar.ui.map({
+      container: 'custom-language-map',
+      center: [lng, lat],
+      zoom,
+      language,
+    });
+    this.setState({ map: newMap, language });
+  }
+
+  render() {
+    const { language } = this.state;
+
+    return (
+      <div>
+        <div style={{ height: '400px', margin: '1rem 0 1.5rem', position: 'relative', width: '100%' }}>
+          <div id="custom-language-map" style={{ bottom: 0, position: 'absolute', top: 0, width: '100%' }} />
+          <select style={{ position: 'absolute', top: 8, right: 8 }} onChange={this.handleLanguageChange}>
+            { LANGUAGES.map(({ code, language }) => (
+              <option key={code} value={code}>{language}</option>
+            ))}
+          </select>
+        </div>
+
+        <CodeBlock className="html">
+          { htmlSnippet(language) }
+        </CodeBlock>
+
+      </div>
+    );
+  }
+};
+
+export default CustomLanguageMap;

snippets/components/examples/CustomPopupMap.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Radar from 'radar-sdk-js';
+
+import 'radar-sdk-js/dist/radar.css';
+
+const PUBLISHABLE_KEY = 'org_test_pk_7e1e22718af02cb9ed4a01233556999c2c02c947'; // same key as /demo/api
+
+class CustomPopupMap extends React.Component {
+  componentDidMount() {
+    Radar.initialize(PUBLISHABLE_KEY);
+
+    // create map
+    const map = Radar.ui.map({
+      container: 'custom-popup-map',
+      center: [-73.990550, 40.735225],
+      zoom: 16,
+    });
+
+    map.on('load', () => {
+
+      // Create a marker with a custom popup using HTML
+      Radar.ui.marker({
+        popup: {
+          html: `
+            <div style="text-align: center;">
+              <h3>The Roosevelt Building</h3>
+              <img width="100" src="https://images.ctfassets.net/f2vbu16fzuly/5VZ6BEW5Ju6kL4OeooR2YG/4e694ad24b8d57c6b9958de79976d89e/Screenshot_2024-07-15_at_9.43.45_AM.png?w=400" />
+            </div>
+          `,
+        },
+      })
+      .setLngLat([-73.9910078, 40.7342465])
+      .addTo(map);
+
+      // Create a marker with a custom popup using a DOM element
+      const element = document.getElementById('custom-popup').cloneNode(true /* deep */);
+      element.style.visibility = 'visible';
+      element.id = 'custom-popup-1';
+
+      Radar.ui.marker({
+        popup: {
+          element,
+        },
+      })
+      .setLngLat([-73.990389, 40.735862])
+      .addTo(map);
+    });
+  }
+
+  render() {
+    return (
+      <div style={{ height: '400px', margin: '1rem 0 1.5rem', position: 'relative', width: '100%' }}>
+        <div id="custom-popup-map" style={{ bottom: 0, position: 'absolute', top: 0, width: '100%' }} />
+
+        <div id="custom-popup" style={{ visibility: 'hidden', textAlign: 'center'}}>
+          <h3>Union Square</h3>
+          <img width="100" src="https://images.ctfassets.net/f2vbu16fzuly/7BUSW7MAtT2abUQY8U3Ri6/11fb8b92fd24c326bfd5da3064d67666/union_square.jpg?w=600" />
+        </div>
+      </div>
+    );
+  }
+};
+
+export default CustomPopupMap;