React Installation | Documentation

React is a popular JavaScript library. This tutorial will show you how to install our maps within a React component.

Download Demo

To use the map in a React component, follow these steps:

  1. Choose the map you want to install:

  2. Add the React library to our webpage. For simplicity, we use a CDN to embed React.

    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    
  3. Embed the map files directly onto the webpage.

    <script src="mapdata.js"></script>
    <script src="usmap.js"></script>
    
  4. Disable the map's default auto loading.

    <script>simplemaps_usmap_mapdata.main_settings.auto_load = 'no';</script>
    

    Alternatively, you could do this within the mapdata.js file.

  5. Add the following HTML to your webpage:

    <div id="react_container"></div>
    

    This is the container <div> that React will control.

  6. Add the following JavaScript to your webpage:

    <script>
    'use strict';
    
    const e = React.createElement;
    
    class SimpleMapsComponent extends React.Component {
    
      render() {
    	return e('div', {id:'map'})
      }
      
      componentDidMount(){
    	 simplemaps_usmap.load();
      }
    }
    
    const domContainer = document.querySelector('#react_container');
    ReactDOM.render(e(SimpleMapsComponent), domContainer);
    </script>
    

    This code creates a React component, populates it with a target div for the map (#map), and then manually loads the map once the component has been mounted.

  7. That's all! You now have a map component will load your map when it is mounted. To learn more, download the demo and review the source code. If you still have any questions, contact us for help.

Home | License | Privacy | Releases | Testimonials | Resources | Documentation | Order Lookup | All Maps
Formerly FlashUSAmap.com and FlashWorldMap.com
SimpleMaps.com is a product of Pareto Software, LLC. © 2010-2021.