JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<script src="http://code.jquerygeo.com/jquery.geo-1.0b1.min.js"></script>
    <div id="map">
    </div>

CSS

#map
    {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }

JavaScript

// start with xml text
      var kml = '<?xml version="1.0" encoding="utf-8"?> <kml xmlns="http://www.opengis.net/kml/2.2"> <Placemark> <name>My office</name> <description>This is the location of my office.</description> <Point> <coordinates>-71.0595678,42.3604823</coordinates> </Point> </Placemark> </kml>',

          kmlDoc = $.parseXML( kml ), //< parsed xml document
          
          // create a map
          map = $( "#map" ).geomap( {
            center: [ -71.0595678, 42.3604823 ],
            zoom: 8
          } ),
          
          cEl, //< storage for our parsed coordinate element
          c; //< storage for our parsed coordinate values

      // find & iterate over Point features
      $(kmlDoc).find("Point").each(function() {
        // find the coordinates element on this Point element
        cEl = $(this).find("coordinates");

        // extract and split the coordinate's values
        c = $(cEl).text().split(",");

        // append the coordinate to the map
        map.geomap( "append", {
          type: "Point",
          coordinates:[ parseFloat( c[0] ), parseFloat( c[1] ) ]
        }, {
          fillOpacity: 1
        });
      });