Area zooming in world map


#1

Hi guys, I have trouble in zooming my map chart. Since only Missouri is needed but the map shows the whole world map. Once I refresh the browser, I have to find Missouri and then use mouse wheel to magnify. This takes too much time. Does anyone know how to lock an area in map?
The following is my code:

var langDomain = ['4', '8', '12', '16', '20','24','28','32','36','40'];
var langOriginColors = ["#00ff40", "#00ff00", "#40ff00", 
    "#80ff00","#bfff00","#ffff00","#ffbf00","#ff8000","#ff4000","#ff0000"]
var langColors = [];
var xDim = crossFilter.dimension("start_longitude");
var yDim = crossFilter.dimension("start_latitude");
var parent = document.getElementById("contentfirst");
mapLangColors(10);
var mapboxToken = "pk.eyJ1IjoibWFwZCIsImEiOiJjaWV1a3NqanYwajVsbmdtMDZzc2pneDVpIn0.cJnk8c2AxdNiRNZWtx5A9g";

var pointMapChart = dc
.rasterChart(parent, true)
.con(con)
.height(h/1.6)
.width(w/2.2)
.mapUpdateInterval(750)
.mapStyle('json/dark-v8.json')
.mapboxToken(mapboxToken) // need a mapbox accessToken for loading the tiles

var pointLayer = dc
.rasterLayer("points")
.crossfilter(crossFilter)
.setState({
  transform: {
    sample: true,
    limit: 500000
  },
  mark: "point",
  encoding: {
    x: {
      type: "quantitative",
      field: "conv_4326_900913_x(start_longitude)"
    },
    y: {
      type: "quantitative",
      field: "conv_4326_900913_y(start_latitude)"
    },
    // size: 3,
    size: {
      type: "quantitative",
      field: "travel_time",
      domain: [0, 100],
      range: [0, 10]
    },
    color: {
      type: "quantitative",
      field: "travel_time",
      domain: [0,40],
      range: langColors
    }
    // color: {
    //   type: "ordinal",
    //   field: "road_type",
    //   domain: langDomain,
    //   range: langColors
    // }
  },
  config: {
    point: {
      shape: "circle"
    }
  }
})
.xDim(xDim)
.yDim(yDim)
// .popupColumns(['tweet_text', 'sender_name', 'tweet_time', 'lang', 'origin', 'followers'])

function mapLangColors(n) {
  langDomain = langDomain.slice(0, n);
  for (var i = 0; i < langDomain.length; i++) {
    langColors.push(langOriginColors[i%langOriginColors.length]);
  }
}

pointMapChart.pushLayer("points", pointLayer).init().then((chart) => {

  // I added this to help draw on map
  pointMapChart

    .addDrawControl()
    .coordFilter(crossFilter.filter())
  // custom click handler with just event data (no network calls)
  // pointMapChart.map().on('mouseup', logClick)
  // function logClick (result) {
  //   console.log("clicked!", result)
  // }


  // hover effect with popup
  var debouncedPopup = _.debounce(displayPopupWithData, 250)
  pointMapChart.map().on('mousewheel', pointMapChart.hidePopup);
  pointMapChart.map().on('mousemove', pointMapChart.hidePopup)
  pointMapChart.map().on('mousemove', debouncedPopup)
  function displayPopupWithData (event) {
    pointMapChart.getClosestResult(event.point, pointMapChart.displayPopup)
  }

#2

Hi @Peng -

You can find an example of setting the bounds of the map here:


#3

This may not work since he is using the crossfilter


#4
Add center and zoom to your dc.rasterChart as below. 
var pointMapChart = dc
.rasterChart(parent, true)
.con(con)
.height(h/1.6)
.width(w/2.2)
.mapUpdateInterval(750)
.mapStyle('json/dark-v8.json')
.mapboxToken(mapboxToken) // need a mapbox accessToken for loading the tiles
.center([-92.5,38.8])
.zoom(5)