Jump to content
Naval Games Community

Yet another map

slik

By slik
in Maps - Development forum

 Share

Recommended Posts

slik Commander

slik

Posted
Posted

Hey. Wanted to introduce yet another map :)

 

I'm not designer, I'm developer, so it looks not that good.

 

What is done:

  • It's pretty accurate
  • There are city markers on the map
  • There is ability to view a basic info about cities, when you move your mouse over the marker
  • 4 zoom levels

What is planned:

  • Update it as often as possible
  • Some makeup :)

Last data update: 24.12.2015

 

The map http://map.shipsofwar.net/

 

original.png

 

Updated: 13.12.2015

 

  1. Added Layers control to the map, you can find it at the bottom left side of the map
  2. Added new map layer (map view) similar to the game's one
  3. Added ability to hide cities' markers

 

1) Layers control

original.png

 

2) Ingame like map layer

original.png

  • Like 10
slik Commander

slik

Posted
  • Author
Posted

can you make a compass overlay(with infinite lines) when you click on a port and connect the database with the one from the open sea server so you dont have to update it yourself

http://potbs.armeagle.nl/map-antigua.php

I will try

 

Well, maybe not. But it has a clear and crisp look, I like that.

Thanks

  • Like 1
slik Commander

slik

Posted
  • Author
Posted

Beautiful work. Is it possible to make port markers (-50% size) when zoomed in all the way? Circles look a little too big on last zoom. 

I'll check what I can do.

Prater Commodore

Prater

Posted
Posted

I wasn't able to get compass lines to work with Leaflet.  The lines would skew if they went over the edge of the map so I had to take them out, whereas, with canvass, I didn't have that problem. I spent hours and hours and hours on different implementations of a compass in leaflet and never got around the skewing if the lines went off the map. If you placed it down in the center of the map and the radius was only 1000 pixels, it worked perfectly, but set the radius to the bounds of the map and it wouldn't work.
 
 
My programming is horrendous
 Canvas Compass - works. This shows the math on drawing lines every 15 degrees.

//canvas  This works.  At the bottom I include a call to draw distance circles which draws circles for every 100 units of distance based off of the knots value in game.  I don't include the code because it is EXTREMELY slow but these nav lines by themselves that I include render pretty fast.
//leftX and leftY are global variables that get changed on mouse click.  It used to be left click (hence leftX), but I changed it to middle mouse button
function drawNavLine(start, end, color, thickness, fast){
  //var fast is no longer used
  
  context.strokeStyle = color;
  context.lineWidth = thickness;
  context.beginPath();
  context.moveTo(start[0], start[1]);
  context.lineTo(end[0], end[1]);
  context.stroke();
  
}

function drawNavLines(){
  var r = 5000;
  

  
  for (i=0; i<360;){
    var color;
    var thickness;
    if (i%90===0){  //N E S W has thickness 3 and a slightly different color to make them stand out
      color = 'rgba(40,40,40,0.7)'//"#282828";
      
      thickness = 3;
    }
    else if (i%45===0){  //NE SE SW NW - along with the ones above, this makes the major cardinal points stand out.
      color = 'rgba(105,105,105,0.7)'//"#696969";  
      thickness = 2;
    }
    else{  //the in-between lines dont stand out as much.
      color = 'rgba(128,128,128,0.7)'//"#808080";
      thickness = 1;
    }
    var a = Math.PI / 180 * i;
    var ex = leftX + r * Math.cos(a);
    var ey = leftY + r * Math.sin(a);
    var fx = leftX + 40 * Math.cos(a);
    var fy = leftY + 40 * Math.sin(a);
    drawNavLine([leftX,leftY],  [ex,ey], color, thickness, [fx, fy]);
    i=i+15;   //naval action has nav lines every 15 degrees on its compass.
  }
  drawDistanceCircles(leftX, leftY)

}


Leaflet Compass (doesn't work)

////Leaflet.  This never worked, for some reason it would skew the lines if the lines went off the edge of the map.


var compass;

var compassLayer =  L.tileLayer.canvas();


compassLayer.addTo(map);
function onMapClick(e) {
  
  console.log("clicked on map")
  console.log("You clicked the map at " + map.project(e.latlng, 5));  //5 is set as the default zoom level on map creation and you need to go off of this zoom level, not your current zoom
  	//$(this).addClass('active');
			if (measuringTool) {
			  if(compassTool){
				//measuringTool = new L.MeasuringTool(map);
				
			
  //if (null != compass){
    //compass.removeFrom(map); 
    //compassLayer.removeLayer(compass)
  //}
  
    //alert("You clicked the map at " + map.project(e.latlng));
    //map.addLayer(new R.Marker(e.latlng,"M 0,0 L 60,30"))
    //var str="";
    var latlngs = [];   //array of latitudes and longitudes points for the compass
    var x = e.latlng.lat;
    var y = e.latlng.lng;
    var rw = map.project(e.latlng, 5);
    var x1 = rw.x;
    var y1 = rw.y;
    console.log(x1 + " , " + y1);
    var r = 100;
    var r1 = 1000;
    
    console.log("mapBounds: " + mapBounds);
      
      var northwest = mapBounds.getNorthWest();
     console.log("Northwest: " + northwest);
      var southeast = mapBounds.getSouthEast();
      console.log("Southeast: " + southeast);

      var nw = map.project(northwest, 5);
      console.log("nw: " + nw);
      var se = map.project(southeast, 5);
      console.log("se: " + se);
      var xmin = nw.x;
      var ymin = nw.y;
      ymin = 0;
      var xmax = se.x;
      var ymax = se.y;
      console.log("xmin: " + xmin + " xmax: " + xmax + " ymin: " + ymin +" ymax: " + ymax );
    
    for (var degree=0; degree<360;degree=degree+15){
 
      
      var a = Math.PI / 180 * degree;
      //var ex = x1 + r1 * Math.cos(a);
      //console.log("i: " + i)
      //console.log("ex: " +ex)
      //var ey = y1 + r1 * Math.sin(a);
      
      //console.log("ey: " +ey)
      //str = str+"M0,0 L"+ex+","+ey+" ";
      
      
      

      
      //for (var yR = 5000; (((y1 + yR * Math.sin(a))>map.getNorth())||(y1 + yR * Math.sin(a))>map.getNorth()))
      //var  = map.getBounds();
      
      
      //var size = map.getSize()
      //console.log("size: " + size);
      //var tp;
      //var tp1;
      
      //var yR = 3200;   //radius
      //var xR = 5200;   //radius
      var yR = 1000;     //radius
      var xR = 1000;      //radius
      var tempy;
      var tempx;


      //trying to dynamically determine the radius so the lines don't go off the edge...still doesn't work.
      //while (cont){
      //  tempy = y1 + yR * Math.sin(a);
      //  //console.log("tempy: " + tempy)
      //  if (tempy <= ymax && tempy >= ymin){
      //    
      //    cont = false;
      //    console.log("   ***  yR   *** " + yR)
      //  }
      //  else{
      //    yR = yR - 50;   
      //  }
      //
      //}
      //var yR = 50;  //radius
      //var xR = 1000;  //radius
//      compassLayer.drawTile = function(canvas, tilePoint, zoom) {
//    var ctx = canvas.getContext('2d');
//    // draw something on the tile canvas
//}


      var cont = true;
      while (cont){
        tempy = y1 + yR * Math.sin(a);
        //console.log("tempy: " + tempy)
        if (tempy <= ymax && tempy >= ymin){
          
          cont = false;
          console.log("   ***  yR   *** " + yR)
        }
        else{
          yR = yR - 50;   
        }

      }

            cont = true;
      while (cont){
        tempx = x1 + xR * Math.cos(a);
        //console.log("tempx: " + tempx)
        if (tempx <= xmax && tempx >= xmin){
          
          cont = false;
          console.log("   ***  xR   *** " + xR)
        }
        else{
          xR = xR - 50;  
        }

      }
      console.log("degree: " + degree + " xr: " + xR + " yr: " +yR)
      var ex = x1 +xR * Math.cos(a);
      var ey = y1 + yR * Math.sin(a);
      console.log("ex: " + ex)
      console.log("ey: " + ey)
      
      var point = L.point(ex, ey);
      //var latLng = map.pointToLatLng(point);
      //var l = map.pointToLatLng( (x1, y1), 5 )
      var l = map.unproject( point,5 );
      //var l = L.latLng(ex, ey);
      //console.log("i: " + i + " e.latlng: " + e.latlng + " l: " + l);
      
      latlngs.push(e.latlng);
      latlngs.push(l);
      
    }
    //console.log("str: " +str)
    //map.addLayer(new R.Marker(e.latlng, str))
    
    //this makes a polyline based on the array latlngs which contains all the points and the correct order.  but if a line goes off the map, it gets skewed.
    compass = L.polyline(latlngs, {color: 'black',weight:1}).addTo(map);
    compassLayer.addLayer(compass);
    compassTool = false;
    
    
			  }  
	}
}



Also, leaflet has so many plugins and you can modify both the leaflet base or its plugins for your own tastes/use/wants. I was able to make a distance counter and add lines that give you bearing. I also made it so you could draw on the map, change colors of lines, etc.  I haven't touched it in a couple months but I can point you to the different plugins I used.  I even modified some of the plugins for my own tastes.  My only problem with Leaflet is the compass lines.  I really want to have the compass lines I have here when you click the middle mouse button.  But overall it was fun to use and tiling is the way to go with maps (if you have a program to do it, i.e. $$) because they load so much faster.  It was just a shame with the compass lines.  If I could get them to work, I would go to Leaflet in a heart beat.

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...