javascriptjqueryjvectormap

Jvector map, how to focus on a marker?


Another frustrating issue I have with Jvectormap, I wish to focus on a Marker on page/map load via lngLat, how would I do this? Ideally it would be good to say focus on this marker or focus on latlng. I will only be displaying 1 marker per map but I won't know the x/y just the lngLat or possibly countrycode. There might be an easier way altogether to do this so suggestions would be welcome. Thanks for your help in advanced

  var markers = [ {latLng: [47.774099, -52.793427], name: "loc 1", label: "This blahblah"}]
   $(function(){
    $('#map1').vectorMap({
                  map: 'world_mill_en',
                  scale: ['#C8EEFF', '#0071A4'],
                  normalizeFunction: 'polynomial',
                  hoverOpacity: 0.7,
                  hoverColor: false,
                  markerStyle: {
                    initial: {
                          fill: '#F8E23B',
                          stroke: '#383f47'
                    }
                  },
                  backgroundColor: '#383f47',
                  markers: markers,
                  focusOn:{
                    latLng: [47.774099, -52.793427],
                    scale: 5
                  },
                  onMarkerLabelShow: function(event, label, index) {
                       label.html( ''+markers[index].label+'');            
                   }
            });
});

Solution

  • I needed the same thing as you and came across your unanswered question. This is the code I wrote (slash copied, pasted & modified from jVectorMap source) to solve the problem for myself. I hope you and others find it helpful.

    Simply pass the scale, longitude, and latitude to setFocusLatLng.

    I may attempt to get this or something similar accepted into the jVectorMap project on GitHub, so there may be a better way to do this later.

    Disclaimer: Points on the edge of the map will not be centered. They should be in the view, though.

    EDIT: As requested, here is the whole thing on jsfiddle: http://jsfiddle.net/BryanTheScott/rs7H5/

    EDIT: Also added the rest of the JS below:

    $(function(){
        var smallMap = $('#my_map_container').vectorMap({
            map: 'world_mill_en',
            zoomOnScroll: true,
            zoomMax:5,
            zoomMin:5,
            regionStyle: {
                initial: {
                    fill: '#222222',
                    "fill-opacity": 1,
                    stroke: '#444444',
                    "stroke-width": 1,
                    "stroke-opacity": 0.7
                },
                hover: {
                    "fill-opacity": 0.8,
                    fill: '#333333'
                }
            },
            markerStyle: {
                initial: {
                    fill: "#000000",
                    "stroke": "#7FC556",
                    "stroke-width": 2,
                    r: 3
                }
            },
            markers: [[37.770172,-122.422771]]
        });
    
        var mapObj = $('#my_map_container').vectorMap('get', 'mapObject');
    
        mapObj.setFocusLatLng = function(scale, lat, lng){
            var point,
                proj = jvm.WorldMap.maps[this.params.map].projection,
                centralMeridian = proj.centralMeridian,
                width = this.width - this.baseTransX * 2 * this.baseScale,
                height = this.height - this.baseTransY * 2 * this.baseScale,
                inset,
                bbox,
                scaleFactor = this.scale / this.baseScale,
                centerX,
                centerY;
    
            if (lng < (-180 + centralMeridian)) {
                lng += 360;
            }
    
            point = jvm.Proj[proj.type](lat, lng, centralMeridian);
    
            inset = this.getInsetForPoint(point.x, point.y);
            if (inset) {
                bbox = inset.bbox;
    
                centerX = (point.x - bbox[0].x) / (bbox[1].x - bbox[0].x);
                centerY = (point.y - bbox[0].y) / (bbox[1].y - bbox[0].y);
    
                this.setFocus(scale, centerX, centerY);
            }
        }
    
        mapObj.setFocusLatLng(5, 37.770172,-122.422771);
    });