Custom Map Types

Custom Map Types 13 years 3 months ago #13250

Bruce Hatton
Topic Author
Offline
Senior Boarder
Posts: 62
Thank you received: 0

Using Global Mapper ( www.globalmapper.com ) I have created a set of of tiles and the code to overlay them on a Google Map. See beta.africamaps.cc/overlay/index.htm

I am guessing that a modified version of the code could be added into the Hotspots component, but I would need some serious guidance on how to do this and where exactly in which file to place it.

Can anybody help? (in a very detailed reply, as my coding skills are zero.)

The code produced by Global Mapper is as follows:

Cape Overlay

var G = google.maps;
var map;

var customMapType = new G.ImageMapType
(
{
getTileUrl: function(coord, zoom)
{
var normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) { return null; }

if ( zoom == 6 && normalizedCoord.x >= 35 && normalizedCoord.x = 38 &&

normalizedCoord.y = 70 && normalizedCoord.x = 76 &&

normalizedCoord.y = 140 && normalizedCoord.x = 152 &&

normalizedCoord.y = 280 && normalizedCoord.x = 304 &&

normalizedCoord.y = 561 && normalizedCoord.x = 609 &&

normalizedCoord.y

Custom Map Types 13 years 3 months ago #13252

Bruce Hatton Topic Author Offline Senior Boarder Posts: 62 Thank you received: 0	My apologies but for some reason, not all my message appears above. The code in question is embedded in beta.africamaps.cc/overlay/index.htm Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Custom Map Types 13 years 3 months ago #13260

Daniel Dimitrov
Away
Administrator
Posts: 9618
Karma: 155
Thank you received: 1081

Hey Bruce,
I hope that you realize that this is not part of your support subscription

go to media/com_hotspots/js/Hotspots.js

at the begining of the file place this code:

 var G = google.maps;
var customMapType = new G.ImageMapType
      (
        {
        getTileUrl: function(coord, zoom)
          {
          var normalizedCoord = getNormalizedCoord(coord, zoom);
          if (!normalizedCoord) { return null; }
 
          if ( zoom == 6 && normalizedCoord.x >= 35 && normalizedCoord.x <= 35 && normalizedCoord.y >= 38 && normalizedCoord.y <= 38 )
          {
            return "http://beta.africamaps.cc/overlay//Z" + zoom + "/" + normalizedCoord.y + "/" + normalizedCoord.x + ".png"; 
          }
          else if ( zoom == 7 && normalizedCoord.x >= 70 && normalizedCoord.x <= 70 && normalizedCoord.y >= 76 && normalizedCoord.y <= 76 )
          {
            return "http://beta.africamaps.cc/overlay//Z" + zoom + "/" + normalizedCoord.y + "/" + normalizedCoord.x + ".png"; 
          }
          else if ( zoom == 8 && normalizedCoord.x >= 140 && normalizedCoord.x <= 141 && normalizedCoord.y >= 152 && normalizedCoord.y <= 153 )
          {
            return "http://beta.africamaps.cc/overlay//Z" + zoom + "/" + normalizedCoord.y + "/" + normalizedCoord.x + ".png"; 
          }
          else if ( zoom == 9 && normalizedCoord.x >= 280 && normalizedCoord.x <= 283 && normalizedCoord.y >= 304 && normalizedCoord.y <= 306 )
          {
            return "http://beta.africamaps.cc/overlay//Z" + zoom + "/" + normalizedCoord.y + "/" + normalizedCoord.x + ".png"; 
          }
          else if ( zoom == 10 && normalizedCoord.x >= 561 && normalizedCoord.x <= 566 && normalizedCoord.y >= 609 && normalizedCoord.y <= 613 )
          {
            return "http://beta.africamaps.cc/overlay//Z" + zoom + "/" + normalizedCoord.y + "/" + normalizedCoord.x + ".png"; 
          }
          return null;
        },
 
        alt: "My Map Set Name",
        tileSize: new G.Size(256, 256),
        isPng: true,
        maxZoom: 10,
        minZoom: 6,
        opacity: 1,
        name: "Cape Overlay"
      }
    )
 
    function getNormalizedCoord(coord, zoom)
    {
      var y = coord.y;
      var x = coord.x;
 
      var tileRange = 1 << zoom;
 
      if (y < 0 || y >= tileRange) { return null; }
      if (x < 0 || x >= tileRange)
      {
        x = (x % tileRange + tileRange) % tileRange;
      }
 
      return { x: x, y: y };
    }

after that go to the setMapOptions (around line 100) function and at the end of it add

this.map.getMap().overlayMapTypes.insertAt(0, customMapType);

the function should look like this then:

	setMapOptions: function() {
		var mapOptions = {
			disableDefaultUI: this.googleMapsDisableDefaultUI(),
			navigationControl: this.googleMapsEnableNavigationControl(),
			navigationControlOptions: {
				'style': this.googleMapsControlStyle(),
				'position': this.googleMapsNavigationControl()
			},
			scrollwheel: true
 
		};
		this.map.getMap().setOptions(mapOptions);
		this.setMapType();
		this.map.getMap().overlayMapTypes.insertAt(0, customMapType);
	},

Daniel

Custom Map Types 13 years 3 months ago #13279

Bruce Hatton Topic Author Offline Senior Boarder Posts: 62 Thank you received: 0	Daniel - You are an absolute star! Thanks very much for the extra effort beyond the normal support. Very much appreciated. It works perfectly. Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Custom Map Types 13 years 2 months ago #13725

Eliecer Marchante
Offline
Platinum Boarder
Posts: 493
Karma: 11
Thank you received: 13

Hi guys,

This feature will be even better, if we can start to show the '2nd map' at some starting zoom level. Is that possible?

Let's think about a park, with trail and all the symbols from the park: example
It will be nice to overlay this trail map on top of the regular map, but only from some zoom value.
We will be able to see the whole map (area), but we wont be able to see the second map, just until we zoom in up to some specific value.

Custom Map Types 13 years 2 months ago #13726

Daniel Dimitrov Away Administrator Posts: 9618 Karma: 155 Thank you received: 1081	You guys are amazing! I can't complete a feature, but you already have another 10 on the list :D:D:D Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Custom Map Types 13 years 2 months ago #13727

Bruce Hatton
Topic Author
Offline
Senior Boarder
Posts: 62
Thank you received: 0

Well Eliecer,

That's not too difficult to do. I'll just tidy up some stuff that I am working on and post the 'how to' in a day or 4.

The key is to use kml files. I know there has been a lot of discussion on the forum about polygons and lines, but I think the way ahead is to use the built-in polygons and lines functions which are built-in with kml.

Dan,

I know other users have asked for the ability to have more instances of a hotspots map - I guess this requires it be a module? Is that right?

Custom Map Types 13 years 2 months ago #13728

Bruce Hatton Topic Author Offline Senior Boarder Posts: 62 Thank you received: 0	Dan - I have ticked 'subscribe', but I am not being updated on additions to some posts...? Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Custom Map Types 13 years 2 months ago #13733

Bruce Hatton
Topic Author
Offline
Senior Boarder
Posts: 62
Thank you received: 0

Elicier and Dan,

I have created a small example of incorporating a custom base map as well as showing some examples of using KML files for lines, points and polygons:

1. Go to EXAMPLE This shows a custom basemap with a polygon KML overlay of a selection of National Parks in the Namibia/Botswana Area. The infowindows have no title or description.

2. Click on 'Map' or 'Satellite' and then zoom out and scroll your map across to Canada. Zoom in to the Lake Okanagan area and you will see another KML. This one incorporates a point (the picnic Hotspot) a line (the park boundary) and a polygon (the grass area).

The easiest way to create KMLs is using Google Earth. I have tried all sorts of so-called KML editors, but by far the best is GE itself.

So, where am I heading with this discussion?

My suggestion is that maybe Dan can find a way of creating an addition to the Hotspots component which allows us to select and search for KMLs in exactly the same way that we do for hotspots. Maybe a similar iconized menu to the right of the existing hotspots icon menu as we have at the top of hotspots where we could select National Parks, Regional Parks etc...

Custom Map Types 13 years 2 months ago #13753

Eliecer Marchante Offline Platinum Boarder Posts: 493 Karma: 11 Thank you received: 13	Hi Bruce, Nice examples. How did you add the polygons to the map? Definitely, it will be really nice if these features could be added to hotspots. Check this box to be notified of replies to this topic. Note: BBcode and smileys are still usable.

Tiles

CMC

CMandrill

FFGate

CUpdater

CNotes

Mydigipass

CSlideshow

Pricing

Joomla! Development

Joomla! Security

App Development

Angular 2

Official releases

Developer releases

Languages

Help Desk

Support policy

Hotspots

Matukio Events

CComment

Ctransifex

CMC

CNotes

CMigrator

CMandrill

MyDigipass

CForms

CForms for WordPress

Video Tutorials

Changelogs

Matukio API Docs

Team

Joomla Commitment

Privacy Policy / Imprint

Notice

TOPIC: Custom Map Types