Javascript API

If you’re savvy with Javascripting, you can control a lot of things in your project with JavaScript. For instance, you can build a custom user interface, integrate a 3D view in your 2D map, or simply just add a link to a point of interest window that turns on a layer.

The API supports:

  • Toggle layer/group on/off
  • Move between Portal to Project and back again
  • Show/Hide Point of interest window
  • Show the Project info window
  • Move the camera to a new position and lookAt
  • Set the date&time to control shadows
  • Set the terrain opacity
  • Control the camera position on startup or runtime

Download the API documentation

If you want to script your project from an embedded web page or if you’re embedding the project view in an iframe, make sure to include:

<script src=”http://cityplanneronline.com/app/js/embedded_jsapi.js” type=”text/javascript”></script>

Download example iframe embed HTML code

Target Links

Group and layer link target is a way of toggling on/off or force a group or layer to turn on no matter which state it is in. You can find the group/layer target link and id if you go to the properties window for the group/layer and click Interactions.

The links can be used in the project info window, points of interests, WMS getfeature info replies or embedded web sites.

Link style

// Show layer with ID ‘12345’

<a href=”#” data-cityplanner-layerid=”12345″>Towers</a>

or force on

<a href=”#” data-cityplanner-layerid=”12345″ data-force-on=”true”>Towers</a>

Script style:

// Show layer with ID ‘12345’ and force on

Cityplanner.showLayer(‘12345’, true);

ie. code example:

$(function(){ Cityplanner.showLayer(‘12345’, true) })