JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

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

CSS

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

JavaScript

// create a map
var map = $("#map").geomap({
  zoom: 2,
  services: [{
    "class": "osm",
    type: "tiled",
    src: function (view) {
      return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
    },
    attr: "<p>Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'></p>"
  }, {
    type: "shingled",
    src: ""
  }],
  shapeStyle: {
    color: "#444",
    fill: "transparent"
  }
});

var i = 0,
  feature = null;

$.getJSON("http://data.jquerygeo.com/countries.geojson", function (result) {
  for (; i < result.features.length; i++) {
    feature = result.features[i];
    if (feature) {
      if (feature.id && $.geo.centroid(feature.geometry)) {
        map.geomap("append", feature, feature.id);
      } else {
        map.geomap("append", feature);
      }
    }
  }
});