Large Canvas with X/Y coordinates

Question

I have a large network with X/Y coordinates similar to this, and I was wondering how I can create my own in version but with my X/Y data.

The issue isn't necessarily drawing the line but being able to zoom in and out and drag the map. The X values range from 0 to 130000 and Y values -37000 to +20000. I also need to be able to put my mouse over a line to get a tooltip (probably info window).

Feel free to ask for clarity and I will reply and edit the main post.

Nodes and edges can be found here: https://drive.google.com/file/d/1j7ev9vfHy-k7AoEmRGjGLheY7-vZ7nUg/view?usp=sharing

   public class Node
    {
        public long Id { get; set; }

        public double X { get; set; }

        public double Y { get; set; }
    }

  public class Edge
    {
        public Edge()
        {
            Nodes = new List<long>();
        }
        public long Id { get; set; }

        public List<long> Nodes { get; set; }
    }

Thanks in advance.

Network of what? It might help if you show some of your own code. — Jonathan Lam, Aug 11 '18 at 19:44
It's a rail network. I've added a link to the nodes and edges and some code. — Liam, Aug 11 '18 at 20:39
What, exactly, is it you actually want to do? From what you have written, I *think* you are asking how to zoom in a ` — qwelyt, Aug 17 '18 at 07:27
Pretty much. But it is also a lot of data and I do not want it to crash the browser when loading the data but I'm guessing that can be done dynamically as and when moving around. — Liam, Aug 17 '18 at 07:36
Not massively. Tiling would be great but not sure if it allows tooltips. — Liam, Aug 17 '18 at 15:40
I've used info windows before but would they work with a tile server drawing the lines? — Liam, Aug 17 '18 at 16:41
Sorry, I will rephrase that. If I use tiles, I won't be able to have tooltips on the lines. — Liam, Aug 17 '18 at 17:22
Hey @Liam did you look at my answer using OpenLayers instead of a Canvas — Helder Sepulveda, Aug 23 '18 at 21:17

Helder Sepulveda · Accepted Answer · 2018-08-18T15:25:38.247

Based on the example you provide and the follow up comments,
I will recommend you to use OpenLayers: https://openlayers.org/

That way all the rendering is done in the browser not in the map tiles, but you can still have the possibility to leverage map tiles, if you want to show a background layer with satellite images you can easily do so.

Here is an example

var geojsonObject = {
  'type': 'FeatureCollection',
  'crs': { 'type': 'name', 'properties': {'name': 'EPSG:4326'}},
  'features': [
    {
      'type': 'Feature', 'properties': {'any-property': 'feature1'},
      'geometry': {
        'type': 'Point',
        'coordinates': [21, 38]
      }
    },{
      'type': 'Feature', 'properties': {'any-property': 'feature2'},
      'geometry': {
        'type': 'LineString',
        'coordinates': [ [21, 38], [22, 39], [22, 40], [21, 38.5], [20.5, 39.5], [22.3, -40] ]
      }
    }
  ]
};

var dataLayer = new ol.layer.Vector({
    source: new ol.source.Vector({ 
        features: new ol.format.GeoJSON().readFeatures(
            geojsonObject, {featureProjection: 'EPSG:3857'}
        )
    }),
});

var map = new ol.Map({
    target: 'map',
    layers: [dataLayer, new ol.layer.Tile({source: new ol.source.BingMaps({layer: 'sat'})})],
    view: new ol.View({center: ol.proj.fromLonLat([21, 38]), zoom: 7})
});

<head>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.css">
    <style>html,body,#map { width:100%; height:100%; margin:0; }</style>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.js"></script>
</head>

<div id="map"></div>

This is a very simple example with data hard coded but you could load that dynamically like you mentioned, take a look at the OpenLayers examples:

https://openlayers.org/en/latest/examples/

Not yet as we've used our internet allowance earlier than expected and I will try it today. — Liam, Aug 24 '18 at 05:22

score 0 · Answer 2 · answered Aug 17 '18 at 08:19

0

As your question boils down to zooming and moving around, I'll direct you to the following answer: Zoom Canvas to Mouse Cursor

It also has a demo page: http://phrogz.net/tmp/canvas_zoom_to_cursor.html

answered Aug 17 '18 at 08:19

qwelyt

776
9
23

Large Canvas with X/Y coordinates

2 Answers2