JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

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

CSS

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

JavaScript

// create a canvas element to draw dynamic tiles
      // interesting tidbit: it's inefficient to create a new canvas for each tile
      // however, JavaScript is single threaded so we can use the same canvas to draw each tile
      var canvas = document.createElement( "canvas" );

      // the size of the canvas element matches the size of a tile
      canvas.width = 256;
      canvas.height = 256;

      // grab a 2d context to draw onto the canvas element
      var context = canvas.getContext( "2d" );

      // a link to the jsFiddle logo :)
      // drawn on every tile
      var logoUrl = "/favicon.ico";

      // create a map
      var map = $( "#map" ).geomap( {
        center: [ -71.0595678, 42.3604823 ],
        zoom: 8,
        services: [ {
          type: "tiled",
          src: function( view ) {
            // create a new Defer object for this tile request
            var defer = new jQuery.Deferred();

            // for this example, every tile will also contain the jQuery Geo logo :)

            // interesting tidbit:
            // you might /want/ to build a URL to an OpenStreetMap tile here
            // however, that is a cross domain security error when we call toDataURL below
            // http://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception

            // if you really want to get OSM map tiles and draw on them,
            // you will have to proxy them from your own website/domain

            // create a new img element where we will download an image
            var img = new Image( );
            
            // hook into the load event
            img.onload = function( ) {
              // this callback is triggered when the tile is done being downloaded to the img element

              // at this point, we have already returned the Deferred object
              // to jQuery Geo for the current tile so it can calculate other tiles; neat!

              // clear the canvas to draw a...