Jqmap2

Note: Mapbox related plugins have been moved to new repo: mapbox-plugins

Jqmap2 contains sets of web app based on Mapbox GL JS and socket.io

Currently Mapbox GL JS is applied to build A totally new flightgame, with pitch, bearing in viewport and webgl render.

Game ScreenShot:

Roads Style and Rectangle label background Rectangle label background based on Canvas Thanks@Yang

Mapbox storylayer example with async/await
Mapbox cloud example

↓Openlayer label without overlap

if interested how it works, visit WIKI for more information.

Demos for you:

Label Example , Openlayer label Engine, Update 2017/5/17. Simple config, easy use.

// new LabelEngine.
var labelEngine = new LabelEngine({
      labelFields: ['city', 'NAME'],
      distStrat: true,
    });

// refresh timer each moveend.
map.on('moveend', function(evt) {
    if (labelEngine) {
        labelEngine.log();
        labelEngine.init();
    }
});

// config layer styleFunction as usual
function cityStyleFunction(feature, resolution) {
  return new ol.style.Style({
      image: new ol.style.Circle({
        fill: new ol.style.Fill({
                color: "#ffc107"
              }),
        radius: 4
      }),
      // config layer label option
      text: labelEngine.createTextStyle(feature, resolution, {
          maxRes: 25000,
          field: "city",
          lang: "en",
      }),
  });
}

Proxy Example , Get resource by Nodejs Proxy, input busline name in DEMO to get the line coordinates.
Blur Example , blur partial canvas context, based on js lib [blurify](https://github.com/alex2wong/blurify).
Mobile web map , the JqueryMobile and Openlayer2 webApp.
Flight Game , press WSAD for move, Space to fire, Enjoy it!
First view flight , press WSAD for move

Todo List:

• add websocket to support multiplayer (completed!)
• optimize touch events to promote mobile performance (completed!)
• display other player's fire action and sync Robot Status to all client, not emit to client speratedly anymore.
• optimize calculation in fire animation. promote game influence.(completed!)
• add mini map to navigate enemy drone(completed).
• add chatPopup to map, clear to show who talks.(completed).
• !important: refactor code structure based on es6. (inprogress..)
• !important: add AI-robot module to current robot flight which can follow and fire at player. (completed)