Query Builder Initialization

When you embed the Query Builder, there are a couple of initialization options that allow you to change its appearance and behavior. For example:

  • You can change the Query Builder's animation speed, or even remove it.
  • You can overwrite the default map overlay options with the mapsOverlay property.


In the example below, we set a red overlay with 30% opacity, and a 1px width white stroke. The default overlay has 50% opacity, has the #7585dd color, and no stroke.

<script type="text/javascript">
    var editor = new JCSDLGui('#jcsdl', {

        //Change the speed of animation to 0
        animate : 0,

        //Sets the Map Overlay element color, opacity, and stroke
        mapsOverlay : {
            strokeWeight : 1,
            strokeColor: '#ffffff',
            fillColor : '#ff0000',
            fillOpacity : 0.3



You can find all of the Configuration options in the Developer Resources section.