Embeddable PlanetSide 2 Maps

You can embed continent maps in an <iframe> on your own website. The map will automatically update facility ownership from Daybreak's Census API. The map also emits DOM events that you can listen to whenever a faciity is captured. You can click on the continent name or the ps2maps.com logo on the map to be taken directly to ps2maps.com.

These embeddable maps are simplified. They include only the continent and the faction-colored territories. Facility icons and lattice links will be added in the near future. Some other possible features may include clicking on territories to see more information about them.

Please contact us if you have any issues, feedback, bug reports, feature requests or if you just want to show us a cool website you integrated our maps into.

First, choose a Server and Continent:


Next, copy/paste this HTML onto your webpage:


If you want the <iframe> to be responsive...

Because the iframe uses dynamically-generated SVGs inside it, a little jQuery is necessary to keep the iframe responsive in a fluid container. The following jQuery will take care of this:

$(window).on('resize', function() {
  $('#').height( $('#').width() );
}).trigger('resize');

If you are using a staticly sized container then the jQuery is not necessary. For your CSS needs, the embedded map is a square (the height is always the exact same as it's width).


Optional: Listen for Facility Capture and Resecure Events

The <iframe> uses jQuery to emit DOM events every time a facility is captured or resecured. You can listen for these events on your webpage and do something cool with the data that is passed in the events. Just use the following jQuery on your webpage to setup an event listener:

$('#').load(function(){
  document.getElementById('#').contentWindow
    .$('.map').on('FacilityCaptured', function(event, data){

      console.log(data); // Do something fun with the data here

    });
});

The two event names you can listen for are FacilityCaptured and FacilityResecured. The data variable that is passed to the DOM Event will be a JSON object similar to the following:

continent: {
  id: 4,
  name: "Hossin",
  slug: "hossin"
},
facility: {
  id: 300010,
  name: "Hurakan Secure Storage"
},
faction: {
  id: 1,
  name: "Vanu Soverignty",
  slug: "vs"
},
timestamp: 1424140683
comments powered by Disqus