×

Notice

The forum is in read only mode.
Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
Hotspots
Pro
Newbie area
Custom Map Types
  • Page:
  • 1

TOPIC: Custom Map Types

Custom Map Types 12 years 9 months ago #13250

  • Bruce Hatton
  • Bruce Hatton's Avatar Topic Author
  • Offline
  • Senior Boarder
  • 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 12 years 9 months ago #13252

  • Bruce Hatton
  • Bruce Hatton's Avatar Topic Author
  • Offline
  • Senior Boarder
  • 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

Custom Map Types 12 years 9 months ago #13260

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Away
  • Administrator
  • 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 12 years 9 months ago #13279

  • Bruce Hatton
  • Bruce Hatton's Avatar Topic Author
  • Offline
  • Senior Boarder
  • 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.

Custom Map Types 12 years 8 months ago #13725

  • Eliecer Marchante
  • Eliecer Marchante's Avatar
  • Offline
  • Platinum Boarder
  • 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 12 years 8 months ago #13726

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Away
  • Administrator
  • 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:D

Custom Map Types 12 years 8 months ago #13727

  • Bruce Hatton
  • Bruce Hatton's Avatar Topic Author
  • Offline
  • Senior Boarder
  • 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 12 years 8 months ago #13728

  • Bruce Hatton
  • Bruce Hatton's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 62
  • Thank you received: 0
Dan - I have ticked 'subscribe', but I am not being updated on additions to some posts...?

Custom Map Types 12 years 8 months ago #13733

  • Bruce Hatton
  • Bruce Hatton's Avatar Topic Author
  • Offline
  • Senior Boarder
  • 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 12 years 8 months ago #13753

  • Eliecer Marchante
  • Eliecer Marchante's Avatar
  • Offline
  • Platinum Boarder
  • 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.
  • Page:
  • 1
Forum
Hotspots
Pro
Newbie area
Custom Map Types
Time to create page: 0.111 seconds