I am newbie in this web app. I have a problem: I am creating with boundless sdk templates of ol3edit but my map doesn't appear How can I fix this problem?

this is not debug on localhost 9080

And how can I connect with geoserver layer?

This is the app.js code:

 * Add all your dependencies here.
 * @require LayersControl.js
 * @require TransactionHandler.js
 * @require FeatureTable.js
 * @require WFSBBOXLoader.js

// ========= config section =============================================
var url = '/geoserver/wfs?';
var featurePrefix = 'usa';
var featureType = 'states';
var featureNS = 'http://census.gov';
var srsName = 'EPSG:3857';
var geometryName = 'the_geom';
var geometryType = 'MultiPolygon';
var fields = ['STATE_NAME', 'STATE_ABBR'];
var layerTitle = 'States';
var center = [-10764594.758211, 4523072.3184791];
var zoom = 3;
// ======================================================================

// this is the callback function that will get called when the features are in
var loadFeatures = function(response) {

// create a WFS BBOX loader helper
var BBOXLoader = new app.WFSBBOXLoader({
  url: url,
  featurePrefix: featurePrefix,
  featureType: featureType,
  srsName: srsName,
  callback: loadFeatures

// create a source to fetch the WFS features using a BBOX loader
var vectorSource = new ol.source.ServerVector({
  format: new ol.format.GeoJSON({
    defaultDataProjection: srsName,
    geometryName: geometryName
  loader: $.proxy(BBOXLoader.load, BBOXLoader),
  strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
    maxZoom: 19
  projection: 'EPSG:3857'

// create a vector layer that uses the source
var vector = new ol.layer.Vector({
  title: layerTitle,
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2

// create the map
var map = new ol.Map({
  controls: ol.control.defaults().extend([
    new app.LayersControl({
      groups: {
        background: {
          title: "Base Layers",
          exclusive: true
        'default': {
          title: "Overlays"
  // render the map in the 'map' div
  target: document.getElementById('map'),
  // use the Canvas renderer
  renderer: 'canvas',
  layers: [
    // MapQuest streets
    new ol.layer.Tile({
      title: 'Street Map',
      group: "background",
      source: new ol.source.MapQuest({layer: 'osm'})
    // MapQuest imagery
    new ol.layer.Tile({
      title: 'Aerial Imagery',
      group: "background",
      visible: false,
      source: new ol.source.MapQuest({layer: 'sat'})
    // MapQuest hybrid (uses a layer group)
    new ol.layer.Group({
      title: 'Imagery with Streets',
      group: "background",
      visible: false,
      layers: [
        new ol.layer.Tile({
          source: new ol.source.MapQuest({layer: 'sat'})
        new ol.layer.Tile({
          source: new ol.source.MapQuest({layer: 'hyb'})
  // initial center and zoom of the map's view
  view: new ol.View({
    center: center,
    zoom: zoom

// create a WFS transaction helper which can help us draw new features,
// modify existing features and delete existing features.
var transaction = new app.TransactionHandler({
  source: vector.getSource(),
  geometryType: geometryType,
  geometryName: geometryName,
  srsName: srsName,
  featureNS: featureNS,
  featureType: featureType,
  url: url,
  map: map

// create a feature table that will represent our features in a tabular form
var table = new app.FeatureTable({
  id: 'features',
  fields: fields,
  showFeatureId: true,
  source: vector.getSource(),
  map: map, 
  container: 'features-container',
  select: transaction.getSelect(),
  offset: 37

// set table height based on responsive panel size
var resizeTableHeight = function() {
  var _window = $(window);
  var window_h = _window.height(), 
      window_w =  _window.width(), 
      navbar_h = $('.navbar').height(),
      table_container = $('#features-container'),
      table = $('#features');

  if (window_w < 768) { // table is beneath map
    var table_height = window_h - $('#map').height();

  } else { // table is right of map
    var table_height = $('#map').height(); 

var turnOnCursor = function() {

var turnOffCursor = function() {

// delete the selected feature
var deleteFeature = function() {

// draw a new feature
var drawFeature = function() {

  transaction.draw_.on('drawend', turnOffCursor, this);

// add layers control collapse button
var addLayersControlBtn = function() {
  var layersControl =  $("#map .layers-control");

  var btnString = '<button type="button" data-toggle="dropdown" class="layers-control-btn btn btn-default btn-sm"><i class="glyphicon glyphicon-minus"></button>';
  var $btn = $($.parseHTML(btnString));
  $btn.css('bottom', layersControl.height()-2);

  $btn.click(function () {
    var iconDiv = $('.layers-control-btn > i.glyphicon');

    if (iconDiv.hasClass('glyphicon-minus')) {
    } else {


$(document).ready(function() {


  // add resize listener for table height, enables scroll-y
  // on table for responsive and full view
  var rszTimer;

  $(window).resize(function(e) {
    rszTimer = setTimeout(resizeTableHeight(), 100);
  }).resize(); // call on first load

  • 1
    Do you have any error messages in the browser's console? – Emily Jul 17 '17 at 16:20
  • yes, sir.this is error message from console. . jaringan jalanUnknown property 'user-select'. Declaration dropped.ol.css:1:503 Unknown property '-moz-osx-font-smoothing'. Declaration dropped.font-awesome.css:21:25 Expected 'none', URL, or filter function but found 'progid'. Error in parsing value for 'filter'. Declaration dropped.font-awesome.css:127:10 – pepi Jul 17 '17 at 16:35
  • Unknown property 'widows'. Declaration dropped.bootstrap.css:228:10 Expected color but found 'auto'. Expected color but found '-webkit-focus-ring-color'. Expected end of value but found '-webkit-focus-ring-color'. Error in parsing value for 'outline'. Declaration dropped.bootstrap.css:301:15 – pepi Jul 17 '17 at 16:38
  • Error in parsing value for 'background-image'. Declaration dropped.bootstrap.css:5484:20 Expected 'none', URL, or filter function but found 'progid'. Error in parsing value for 'filter'. Declaration dropped.bootstrap.css:5486:10 Expected 'none', URL, or filter function but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped.bootstrap.css:5493:10 Expected end of value but found '\9 '. Error in parsing value for 'background-color'. Declaration dropped.bootstrap.css:5546:25 AssertionError: Failure(unknown) – pepi Jul 17 '17 at 16:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.